import React, { Fragment, useEffect, useRef, useState } from 'react'
import { observer, useLocalObservable } from 'mobx-react'
import Store from '../store'
import styles from './index.module.less'
import starImg from '@/resource/vision/star.png'
import moonImg from '@/resource/vision/moon.png'
import editImg from '@/resource/vision/edit.png'
import EditModal from '../components/EditModal'
import { createBrowserHistory, history, useLocation, useParams } from 'umi'
import { postData, putData } from '@/servers/http'
import { api } from '@/servers/api'
import TaskFinshModal from '@/components/TaskFinishModal'
import { levelPathMap } from '@/const'

const List = observer(() => {
    const store = useLocalObservable(() => Store)
    const { questionList, getQuestionListData, info, getInfo } = store
    const [editIdx, setEditIdx] = useState<number>(-1)
    const [visible, setVisible] = useState<boolean>(false)
    const [fishVisible, setFinshVisible] = useState<boolean>(false)
    const { id } = useParams<any>()
    const {
        query: { isSubmitTraining },
    }: any = useLocation()
    console.log(isSubmitTraining)

    const {
        query: { first },
    }: any = useLocation()

    useEffect(() => {
        getData()
    }, [])

    async function getData() {
        if (!questionList.length) {
            await getQuestionListData(id)
        }
        await getInfo(id)
    }

    function showEditModal(idx: number) {
        setEditIdx(idx)
        setVisible(true)
    }

    function handleFinish() {
        /** 是否是首次 */
        if (first && isSubmitTraining === 'false') {
            const data: any = []
            questionList.forEach(item => {
                data.push({ question_id: item.id, answer: item.answer })
            })
            postData(`${api.userBarriersBatchInput}${id}`, { data }).then(res => {
                setFinshVisible(true)
            })
        } else {
            history.push(`/level?id=${info?.scene_id}`)
            /** 是否是最后一个关卡 */
            // if (info?.is_last === '1') {
            //     history.push('/home')
            // } else {
            //     /** 跳转到下一个关卡 */
            //     const path = levelPathMap.get(`${info.nextBarrier.type}`)
            //     console.log(path)
            //     const historys = createBrowserHistory({
            //         basename: '', //基链接
            //         forceRefresh: true, //是否强制刷新
            //     })
            //     historys.push(`${path}/${info.nextBarrier.id}`)
            // }
        }
    }

    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <img className={styles.moon_img} src={moonImg} />
                职业愿景
            </div>
            <div className={styles.content_wrapper}>
                {questionList?.map((item, idx) => {
                    return (
                        <Fragment key={item.id}>
                            <div className={styles.title}>
                                <img className={styles.star_img} src={starImg} />
                                <span>{item.answer_title}</span>
                                {isSubmitTraining === 'false' && <img className={styles.edit_img} onClick={() => showEditModal(idx)} src={editImg} />}
                            </div>
                            <div
                                className={`${idx === editIdx ? styles.selected : ''} ${styles.answer_content}`}
                                // onClick={() => showEditModal(idx)}
                            >
                                {item.answer}
                            </div>
                        </Fragment>
                    )
                })}
            </div>

            {isSubmitTraining === 'false' && (
                <div className={styles.finish_btn} onClick={handleFinish}>
                    任务完成
                </div>
            )}
            <EditModal levelId={id} visible={visible} idx={editIdx} onClose={() => setVisible(false)} onOk={() => setVisible(false)} />
            <TaskFinshModal levelInfo={info} visible={fishVisible} onClose={() => setFinshVisible(false)} />
        </div>
    )
})

export default List
